<template>

    <baidu-map
    class="map"
    :style="{width:'100%',height:'100%'}"
    :center="{lng: 112.473797, lat: 34.624502}"
    :scroll-wheel-zoom="true"
    :zoom="15"
      ak="6trUTb7Z7zgL5PHvk3LIy5t639xXaovh"
  >
    <bm-point-collection
      :points="points"
      shape="BMAP_POINT_SHAPE_STAR"
      color="red"
      size="BMAP_POINT_SIZE_SMALL"
    ></bm-point-collection>
    <bm-polyline
      :path="polylinePath"
      stroke-color="blue"
      :stroke-opacity="1"
      :stroke-weight="2"
      
    ></bm-polyline>
        <bm-polygon :path="polygonPath" stroke-color="blue" fill-color="red" :stroke-opacity="0.5" :stroke-weight="2" />
  </baidu-map>

</template>
<script>
const jsts = require("jsts/dist/jsts");
import Map from "ol/Map.js";
import View from "ol/View.js";
import GeoJSON from "ol/format/GeoJSON.js";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer.js";
import { fromLonLat } from "ol/proj.js";
import Feature from "ol/Feature";
import OSM from "ol/source/OSM.js";
import VectorSource from "ol/source/Vector.js";
import LinearRing from "ol/geom/LinearRing.js";
import {
  Point,
  LineString,
  Polygon,
  MultiPoint,
  MultiLineString,
  MultiPolygon
} from "ol/geom.js";
let parser = new jsts.io.OL3Parser();
parser.inject(
  Point,
  LineString,
  LinearRing,
  Polygon,
  MultiPoint,
  MultiLineString,
  MultiPolygon
);
export default {
  data() {
    return {
      pointslist: [[112.359964, 34.710007], [112.473797, 34.624502]],
      polygonPathlist:[]
    };
  },
  computed: {
    points() {
      return this.pointslist.map(ele => {
        return {
          lng: ele[0],
          lat: ele[1]
        };
      });
    },
    polylinePath() {
          return this.pointslist.map(ele => {
        return {
          lng: ele[0],
          lat: ele[1]
        };
      });
    },
    polygonPath(){
                 return this.polygonPathlist.map(ele => {
        return {
          lng: ele[0],
          lat: ele[1]
        };
      });
    }
  },
  mounted() {
    var line = new LineString([
      [112.359964, 34.710007],
      [112.473797, 34.624502]
    ]).transform("EPSG:4326", "EPSG:3857");
    var feature = new Feature(line);
    var jstsGeom = parser.read(line);
    var format = new GeoJSON();
    // create a buffer of 40 meters around each line
    var buffered = jstsGeom.buffer(1000);
    var geomtry = parser.write(buffered);
    //不要进行任何打印相关的操作，所有关于geomtry的操作都会改变原始数据
    let json =  format.writeGeometry(geomtry.transform("EPSG:3857", "EPSG:4326"));
    this.polygonPathlist =JSON.parse(json).coordinates[0]
  }
};
</script>
